<template>
	<view class="counselor-list">
		<block v-if="range">
			<view v-for="(item,index) in range" :key="index">
				<navigator
					:url="'/pages/consult/detail?id='+item.id"
					open-type="navigate"
					hover-class="none"
					class="counselor-list-item mar-t-13 flex  over-hid pad-b-15"
				>
					<image class="avator" :src="item.user.avatar" lazy-load=true mode="aspectFill"></image>
					<view class="flex-1 flex flex-column mar-l-15  item-info ">
						<view class="name  flex align-center">
							<text class="font-size-17 font-bold">{{item.user.nickname}}</text>
							<text class="font-size-11 font-color-666 mar-l-5 flex-1">从业{{item.work_time}}年</text>
							<text class="font-size-13 font-color-666 mar-r-10">查看资料</text>
						</view>
						<view class="tag tq-line-1 mar-t-5">
							<view class="tq-text-line1" >
								<block v-if="item.tag_text">
									<block  v-for="(tag,k) in item.tag_text" :key="k">
										<view class="tag-item mar-r-5 font-size-10 dis-inline-block" v-if="k<3">{{tag}}</view>
									</block>
								</block>
							</view>
						</view>
						<view class="desc font-color-666   tq-text-line1 font-size-13 over-hid mar-t-5">
							<text >{{item.user.bio}}</text>
						</view>
						<view class="flex">
							<view class="">
								<view class="mar-t-10"><text class="ticket-num font-size-13">上午余{{item.morning_num-item.order_morning_num}}/{{item.morning_num}}</text></view>
								<view class="mar-t-10"><text class="ticket-num font-size-13">下午余{{item.afternoon_num-item.order_afternoon_num}}/{{item.afternoon_num}}</text></view>
							</view>
							<view class="justify-end flex align-end font-size-15 font-color-fff flex-1" @click.stop="yuyue(item)">
								<text class="yuyue-btn">预约</text>
							</view>
						</view>
					</view>
				</navigator>
				<!-- <view class="pad-b-20">
					<view class="mar-t-10 schedule-list flex font-size-14 border-b-1 align-center">
						<view class="flex-1">
							12-20（星期一）8:00-9:00
						</view>
						<view class="yuye-btn">预约</view>
					</view>
					
				</view> -->
			</view>
		</block>
	</view>
</template>

<script>
export default {
	props: ['range'],
	data() {
		return {}
	},
	methods: {
		yuyue(item){
			this.$emit('yuyue',item);
		}
	},
	mounted() {
		console.log(this.range);
	},
}
</script>

<style scoped>
.counselor-list-item .avator {
	height: 7.5em;
	width: 5.28em;
	background-color: #cccccc;
	border-radius: 10px;
}
.counselor-list-item .tag .tag-item {
	padding: 6rpx 16rpx;
	border-radius: 4rpx;
	color: #666666;
	background-color: #f4f4f4;
	word-wrap: break-word;
}
.item-info{
	/* height: 6.1em;
	 */
}
.schedule-list{
	padding: 5px 10px;
}
.schedule-list .yuye-btn{
	padding: 5px 10px;
	background-color: #0088ff;
	color: #fff;
	border-radius: 5px;
}
.ticket-num{
	background-color: #f4f4f4;
	color: #999999;
	padding: 8rpx 12rpx;
	border-radius: 8rpx;
}
.yuyue-btn{
	line-height: 65rpx;
	width: 100%;
	max-width: 160rpx;
	text-align: center;
	display: inline-block;
	background-color: #FF5C00;
	border-radius: 8px;
}
</style>